<!doctype html>

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>APTRA Theme - Demo Page</title>

    <link rel="stylesheet/less" type="text/css" href="../less/themes/aptra/aptra-theme.less"/>
    <script type="text/javascript" src="META-INF/resources/scripts/less-1.2.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>

    <script id="menu-template" type="text/underscore">
        <div style="position: absolute;">
            <div class="ds-PopupMenu">
                <i class="arrow"></i>
                <ul>
                    <li data:func="changePassword">Change Password</li>
                    <li class="divider"></li>
                    <li data:func="preferences">Preferences</li>
                </ul>
            </div>
        </div>
    </script>

    <script>
        $(document).ready(function() {
            $(".user-info").click(function() {
                var template = _.template($("#menu-template").html());
                var menuHtml = template({});
                $("body").append(menuHtml);
                var top = $(this).offset().top + $(this).height() + 1;
                var right = $(document).width() - ($(this).offset().left + $(this).width());
                var minWidth = $(this).width();
                $(".ds-PopupMenu").parent().css("top", top).css("right", right).css("min-width", minWidth);
            });
        });
    </script>
</head>

<body class="body-background">
    <div class="dashboard-view">
        <div class="header">
            <span class="product-name">Project 24 Archetype</span>
            <a class="user-info">
                <span>John Smith | System Tenant</span>
                <i class="arrow"></i>
            </a>
            <button>Logout</button>
        </div>
        <div class="row">
            <ul class="feature-tabbar">
                <li class="tab">Feature 1</li>
                <li class="divider"></li>
                <li class="tab">Feature 2</li>
                <li class="divider"></li>
                <li class="tab selected">Feature Longer Name</li>
                <li class="divider"></li>
                <li class="tab">Feature Long Name</li>
                <li class="divider"></li>
                <li class="tab">Feature 3</li>
                <li class="divider"></li>
                <li class="tab">Feature 4</li>
            </ul>
            <ul class="page-tabbar">
                <li class="tab">Tab 1</li>
                <li class="divider"></li>
                <li class="tab">Tab 2</li>
                <li class="divider"></li>
                <li class="tab selected">Tab With Long Name</li>
                <li class="divider"></li>
                <li class="tab">Tab Shorter</li>
                <li class="divider"></li>
                <li class="tab">Tabby 3</li>
                <li class="divider"></li>
                <li class="tab">Tabby 4</li>
            </ul>
        </div>

        <div class="row">
            <button class="view-filter-button">
                View Filter (52 Terminals Selected)
                <i class="icon"></i>
                <i class="caret up"></i>
            </button>
            <ul class="toolbar">
                <li><i class="new"></i></li>
                <li><i class="edit"></i></li>
                <li><i class="copy"></i></li>
                <li><i class="save"></i></li>
                <li><i class="cancel"></i></li>
                <li><i class="delete"></i></li>
                <li class="vdivider"></li>
                <li><i class="download"></i></li>
                <li><i class="upload"></i></li>
                <li class="vdivider"></li>
                <li><i class="print"></i></li>
                <li><i class="export"></i></li>
                <li class="vdivider"></li>
                <li><i class="command"></i></li>
                <li><i class="settings"></i></li>
                <li class="vdivider"></li>
                <li><i class="search"></i></li>
                <li class="vdivider"></li>
                <li><i class="quick-commands"></i></li>
            </ul>
        </div>


        <div class="row container">
            <div>
                <!-- Row -->
                <div class="row-fluid">
                    <div class="column span6">
                        <div class="module" style="width: 100%">
                            <div class="titlebar">
                                <span class="title">Tables</span>
                                <div class="buttons">
                                    <button><i class="settings"></i></button>
                                    <button><i class="min"></i></button>
                                    <button><i class="close"></i></button>
                                </div>
                            </div>
                            <div class="content vbox-spacing">
                                <!-- Sample content -->
                                <table style="width: 100%">
                                    <thead>
                                        <tr>
                                            <th>First Name</th>
                                            <th>Last Name</th>
                                            <th>Age</th>
                                            <th>Address</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="selected">
                                            <td class="selected">John</td>
                                            <td class="selected">Smith</td>
                                            <td class="selected">30</td>
                                            <td class="selected">123 Some Street, Orlando, FL 32814</td>
                                        </tr>
                                        <tr class="selected">
                                            <td class="selected">John</td>
                                            <td class="selected">Smith</td>
                                            <td class="selected">30</td>
                                            <td class="selected">123 Some Street, Orlando, FL 32814</td>
                                        </tr>
                                        <tr>
                                            <td>John</td>
                                            <td>Smith</td>
                                            <td>30</td>
                                            <td>123 Some Street, Orlando, FL 32814</td>
                                        </tr>
                                        <tr>
                                            <td>John</td>
                                            <td>Smith</td>
                                            <td>30</td>
                                            <td>123 Some Street, Orlando, FL 32814</td>
                                        </tr>
                                    </tbody>
                                </table>

                                <div class="scrollable" style="max-height: 200px;">
                                    <table style="width: 100%;">
                                        <thead>
                                            <tr>
                                                <th>First Name</th>
                                                <th>Last Name</th>
                                                <th>Age</th>
                                                <th>Address</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>John</td>
                                                <td>Smith</td>
                                                <td>30</td>
                                                <td>123 Some Street, Orlando, FL 32814</td>
                                            </tr>
                                            <tr>
                                                <td>John</td>
                                                <td>Smith</td>
                                                <td>30</td>
                                                <td>123 Some Street, Orlando, FL 32814</td>
                                            </tr>
                                            <tr>
                                                <td>John</td>
                                                <td>Smith</td>
                                                <td>30</td>
                                                <td>123 Some Street, Orlando, FL 32814</td>
                                            </tr>
                                            <tr>
                                                <td>John</td>
                                                <td>Smith</td>
                                                <td>30</td>
                                                <td>123 Some Street, Orlando, FL 32814</td>
                                            </tr>
                                            <tr>
                                                <td>John</td>
                                                <td>Smith</td>
                                                <td>30</td>
                                                <td>123 Some Street, Orlando, FL 32814</td>
                                            </tr>
                                            <tr>
                                                <td>John</td>
                                                <td>Smith</td>
                                                <td>30</td>
                                                <td>123 Some Street, Orlando, FL 32814</td>
                                            </tr>
                                            <tr>
                                                <td>John</td>
                                                <td>Smith</td>
                                                <td>30</td>
                                                <td>123 Some Street, Orlando, FL 32814</td>
                                            </tr>
                                            <tr>
                                                <td>John</td>
                                                <td>Smith</td>
                                                <td>30</td>
                                                <td>123 Some Street, Orlando, FL 32814</td>
                                            </tr>
                                            <tr>
                                                <td>John</td>
                                                <td>Smith</td>
                                                <td>30</td>
                                                <td>123 Some Street, Orlando, FL 32814</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="column span6">
                        <div class="ds-TitleBarPanel" style="width: 100%">
                            <div class="titlebar">
                                <span class="title">Search</span>
                                <div class="buttons">
                                    <button><i class="settings"></i></button>
                                    <button><i class="min"></i></button>
                                    <button><i class="close"></i></button>
                                </div>
                            </div>
                            <style type="text/css">
                                .search-query .query {
                                    float: left;
                                    width: 60%;
                                }

                                .search-query .query input {
                                    width: 90%;
                                }

                                .search-query .query select {
                                    min-width: 200px;
                                }

                                .search-query .options {
                                    margin: 0 0 0 60%;
                                }

                                .search-query .options input {
                                    margin: 0 10px 0 4px;
                                }

                                .search-query .options label {
                                    font-weight: normal;
                                }

                                .search p {
                                    font-weight: bold;
                                    margin-bottom: 0.25em;
                                    padding: 0;
                                }

                                table {
                                    width: 100%;
                                }
                            </style>
                            <div class="content vbox-spacing search">
                                <div class="search-query border-bottom clear">
                                    <div class="query vbox-spacing">
                                        <div class="form-item">
                                            <label>Search Criteria:</label>
                                            <input type="text" maxlength="500"/>
                                        </div>
                                        <div class="form-item">
                                            <label>Search Field:</label>
                                            <select>
                                                <option>Name</option>
                                                <option>Username</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="options vbox-spacing">
                                        <p>Options:</p>
                                        <div>
                                            <input type="radio" name="test"/><label>All of the words</label>
                                        </div>
                                        <div>
                                            <input type="radio" name="test"/><label>Any of the words</label>
                                        </div>
                                        <div>
                                            <input type="radio" name="test"/><label>Exact phrase</label>
                                        </div>
                                        <div>
                                            <input type="checkbox" name="test2"><label>Case sensitive</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="right hbox-spacing">
                                    <button>Search</button>
                                    <button>Cancel</button>
                                </div>
                                <div class="scrollable full-width">
                                    <table>
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Description</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>John Smith</td>
                                                <td>Some person</td>
                                            </tr>
                                            <tr>
                                                <td>John Smith</td>
                                                <td>Some person</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="vbox-spacing">
                                    <div class="center border-top hbox-spacing">
                                        <button>Add</button>
                                        <button>Remove</button>
                                    </div>
                                    <p>Selections:</p>
                                    <div class="scrollable">
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Description</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>John Smith</td>
                                                    <td>Some person</td>
                                                </tr>
                                                <tr>
                                                    <td>John Smith</td>
                                                    <td>Some person</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="right">
                                    <button>OK</button>
                                </div>
                            </div>
                        </div>
                        <div class="ds-TitleBarPanel" style="width: 100%">
                            <div class="titlebar">
                                <span class="title">Form layout</span>
                                <div class="buttons">
                                    <button><i class="settings"></i></button>
                                    <button><i class="max"></i></button>
                                    <button><i class="close"></i></button>
                                </div>
                            </div>
                            <div class="content vbox-spacing">
                                <h1>Test Form</h1>
                                <div class="form-item">
                                    <label>Name:</label>
                                    <input type="text" width="30"/>
                                </div>
                                <div class="form-item error">
                                    <label>
                                        <span>Description:</span>
                                        <em>*</em>
                                        <span class="error-span">This is an error</span>
                                    </label>
                                    <input type="text" style="width: 95%;"/>
                                </div>

                                <h1>Task Assignment</h1>
                                <style>
                                    .TaskPermissionCell {
                                        height: 25px;
                                    }

                                    .TaskPermissionCell label {
                                        display: inline;
                                    }

                                    .TaskPermissionCell input {
                                        margin: 0 4px 0 10px;
                                    }

                                    .TaskPermissionCell input:first-child {
                                        margin-left: 0;
                                    }
                                </style>

                                <div class="form-item TaskPermissionCell">
                                    <div style="float: left; width: 25%; height: 25px; line-height: 25px;">
                                        Security Admin
                                    </div>
                                    <div style="margin: 0 0 0 30%; height: 25px; line-height: 25px;">
                                        <input type="radio" name="test"/><label>No Access</label>
                                        <input type="radio" name="test"/><label>View</label>
                                        <input type="radio" name="test"/><label>Edit</label>
                                        <input type="radio" name="test"/><label>Create</label>
                                        <input type="radio" name="test"/><label>Full</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Row -->
                <div class="row-fluid">
                    <div class="column span4">
                        <div class="drag-shadow" style="height: 200px"></div>
                        <div class="gwt-HTML placeholder" style="height: 100px"></div>
                    </div>
                    <div class="column span3">
                        <div class="module" style="width: 100%">
                            <div class="titlebar">
                                <span class="title">Headings</span>
                                <div class="buttons">
                                    <button><i class="settings"></i></button>
                                    <button><i class="max"></i></button>
                                    <button><i class="close"></i></button>
                                </div>
                            </div>
                            <div class="content">
                                <!-- Sample content -->
                                <div class="vbox-spacing" style="height: 300px">
                                    <h1>Heading 1</h1>
                                    <h2>Heading 2</h2>
                                    <h3>Heading 3</h3>
                                    <h4>Heading 4</h4>
                                    <h5>Heading 5</h5>
                                    <h6>Heading 6</h6>
                                    <p>Paragraph 1 that wraps to a new line
                                    potentially depending on how much text
                                    is available to put in the paragraph.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="column span5">
                        <div class="module" style="width: 100%">
                            <div class="titlebar">
                                <span class="title">Test Pod Layout</span>
                                <div class="buttons">
                                    <button><i class="settings"></i></button>
                                    <button><i class="min"></i></button>
                                    <button><i class="close"></i></button>
                                </div>
                            </div>
                            <div class="content">
                                <!-- Sample content -->
                                <div class="vbox-spacing">
                                    <h2>Sample Form</h2>
                                    <label for="t1">Text Input:</label>
                                    <input id="t1" type="text" size="25"/>
                                    <label for="t2">Text Input (with Placeholder):</label>
                                    <input id="t2" type="text" size="25" placeholder="Placeholder Text"/>
                                    <label for="checkBox">Check Box:</label>
                                    <input id="checkBox" type="checkbox"/>
                                    <label for="checkBoxChecked">Check Box (Checked):</label>
                                    <input id="checkBoxChecked" type="checkbox" checked="true"/>
                                    <label>Combo Box:</label>
                                    <select>
                                        <option>100000</option>
                                        <option>200000</option>
                                        <option>300000</option>
                                        <option>400000</option>
                                    </select>
                                    <div>
                                        <button>Save</button> <button disabled="true">Cancel</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
